<template>
	<view class="page">
		<view class="flex0" style="background: #fff;">
			<u-navbar :fixed='false' bgColor="transparent" @leftClick="navBack" title="心理科普">
				<view slot="center" class="navTitle">
					心理科普
				</view>
			</u-navbar>
			<view class="pd30">
				<view class="filterBlock">
					<view class="block">
						<view class="search">
							<view class="ico">
								<image src="@/static/images/icon-search.png" mode="aspectFit"></image>
							</view>
							<input type="text" v-model="keyword" placeholder="搜索名称" confirm-type="search"
								@confirm="search" />
						</view>
						<view class="btn" @tap="toggleLayout">
							<view class="ico" v-if="layout=='line'">
								<image src="@/static/images/icon-layout1.svg" mode="aspectFit"></image>
							</view>
							<view class="ico" v-else>
								<image src="@/static/images/icon-layout2.svg" mode="aspectFit"></image>
							</view>
						</view>
					</view>
					<view class="block filters" v-if="filterOptions">
						<view class="i">
							<uni-data-select :value="filterResult.categoryId" v-model="filterResult.categoryId"
								:clear="false" :localdata="filterCate" placeholder="科普分类"
								@change="search"></uni-data-select>
						</view>
						<view class="i">
							<uni-data-select v-model="filterResult.articleType" :clear="false" :localdata="filterType"
								placeholder="文章类型" @change="search"></uni-data-select>
						</view>
						<view class="i">
							<uni-data-select v-model="filterResult.orderBy" :clear="false" :localdata="sortBy"
								placeholder="排序" @change="search"></uni-data-select>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="flex1">
			<scroll-view scroll-y="true" @scroll="updateScroll" :scroll-top="scrollTop" class="scrollView pt30"
				@scrolltolower="loadMore">
				<view class="pd30">
					<view class="articleList" :class="''+layout">
						<navigator open-type="navigate" :url="'/subpage/article/detail?id='+i.id" class="item"
							v-for="(i,index) in list" :key="index">
							<view class="img">
								<image :src="i.picUrl" mode="aspectFill"></image>
								<view class="vd" v-if="i.video">
									<view class="ic">
										<image src="@/static/images/icon-play.png" mode="aspectFit"></image>
									</view>
								</view>
							</view>
							<view class="txt">
								<view class="it">
									{{i.title}}
								</view>
								<view class="ibot">
									<view class="date" v-if="i.publishDate">
										{{i.publishDate.split(' ')[0]}}
									</view>
									<view class="hits">
										<view class="ico">
											<image src="@/static/images/icon-view.svg" mode="aspectFit"></image>
										</view>
										<view class="span">
											{{i.hitCount}}
										</view>
									</view>
								</view>
							</view>
						</navigator>
					</view>
					<u-loadmore fontSize="24rpx"
						:status="list.length<total?(isLoading?'loading':'loadmore'):'nomore'" />
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		onShow: function() {},
		data() {
			return {
				oldScrollTop: 0,
				scrollTop: 0,
				layout: 'line', //排版样式，line横向排版，grid网格排版
				filterOptions: [],
				filterCate: [],
				sortBy: [{
						value: '2',
						text: '按时间正序'
					},
					{
						value: '1',
						text: '按时间倒序'
					}
				],
				filterResult: {
					orderBy: '',
					categoryId: ''
				},
				filterType: [{
						value: '图文',
						text: '图文'
					},
					{
						value: '视频',
						text: '视频'
					},
					{
						value: '音频',
						text: '音频'
					}
				],
				list: [],
				keyword: '',
				pageSize: 10,
				total: 1,
				pageIndex: 1,
				isLoading: false
			}
		},
		methods: {
			updateScroll(e) {
				this.oldScrollTop = e.detail.scrollTop;
			},
			toggleLayout() {
				this.layout = this.layout == 'line' ? 'grid' : 'line';
			},
			search() {
				var that = this;
				that.list = [];
				that.pageIndex = 1;
				that.scrollTop = that.oldScrollTop;
				that.$nextTick(function() {
					that.scrollTop = 0
				});
				that.getList();
			},
			initData() {
				this.pageIndex = 1
				this.list = []
				this.getList()
			},
			getList() {
				if (this.isLoading) {
					return;
				};
				this.isLoading = true;
				let post = {
					pageNo: this.pageIndex,
					keyword: this.keyword,
					...this.filterResult,
				}
				if(!this.filterResult.categoryId){
					post.parentId=9
				}
				this.$api.articleList(post, res => {
					if (res.code == 200) {
						let _list = res.data.list;
						this.list = [...this.list, ..._list]
						this.total = res.data.total
						this.isLoading = false;
					}
				})
			},
			loadMore() {
				var that = this;
				if (that.list.length < that.total && !that.isLoading) {
					that.pageIndex++;
					that.getList();
				}
			}
		},
		onLoad(e) {

			var that = this;
			this.$api.articleCate({
				parentId: 9
			}, res => {
				if (res.code == 200) {
					res.data.some(item => {
						item.value = item.id
						item.text = item.name
					})
					let i={
						value:'',
						text:'科普分类'
					}
					this.filterCate = res.data
					this.filterCate.unshift(i)
					if (e.categoryId) {
						this.filterResult.categoryId = e.categoryId
					}
					this.initData();
				}
			})
		}
	}
</script>

<style lang="scss" scoped>

</style>